<template>
  <div class="seven_content myStyle">
    <div class="content_top">
      <StrokeTitle title="均值统计" class="float margin" style="width: 32.3%">
        <div class="flex_center">
          <ElementRadio
            v-model="model"
            :isButton="true"
            @change="radioChange1"
            :options="[
              {
                value: 'lastMonth',
                label: '上月',
              },
              { value: 'quarter', label: '当季' },
            ]"
          />
          <ElementSelect
            :isFilterable="false"
            ref="psNameSelect"
            url="/system/dict/data/sevenList"
            :isClearable="false"
            :isAll="false"
            :formData="{ dictType: 'product_report_type' }"
            :settings="settings"
            :isSelected="true"
            @select="selectList1"
          />
        </div>
        <div class="flex_center Echarts">
          <div class="zbfx_box flex_center_direction">
            <div class="zbfx_box_item backgroung flex_center">
              <!-- <img src="@/assets/images/echarts/tsshui.png" alt="" /> -->
              <div class="center flex_center_direction">
                <div class="title">
                  水利用率
                  <span
                    class="title"
                    style="color: #cccccc !important"
                    v-if="water.length <= 0"
                    >暂无数据</span
                  >
                </div>
                <div class="number" v-if="water.length > 0">
                  <p
                    v-for="(item, index) in water"
                    :key="index"
                    class="p-number"
                    :class="item == '.' ? 'noborder' : ''"
                  >
                    {{ item }}
                  </p>
                  <!-- <p class="p-number noborder text_shadow" style="color:#3bffe6;margin-left:3px"> %</p> -->
                </div>
              </div>
              <div class="right" v-if="water.length > 0">
                <div class="stroke_item">
                  <span>同比:</span>
                  <div
                    class="stroke_item-right text_shadow_yellow"
                    v-if="top1.wy == '0.00'"
                  >
                    {{ top1.wy }}%
                  </div>
                  <div class="stroke_item-right danger" v-else-if="top1.wy > 0">
                    {{ top1.wy }}%
                    <img
                      style="transform: rotate(180deg)"
                      src="@/assets/images/echarts/jiang.png"
                      alt=""
                    />
                  </div>
                  <div class="stroke_item-right" v-else-if="top1.wy < 0">
                    {{ top1.wy }}%
                    <img
                      style="transform: rotate(180deg)"
                      src="@/assets/images/echarts/sheng.png"
                      alt=""
                    />
                  </div>
                </div>
                <div class="stroke_item">
                  <span>环比:</span>
                  <div
                    class="stroke_item-right text_shadow_yellow"
                    v-if="top1.wm == '0.00'"
                  >
                    {{ top1.wm }}%
                  </div>
                  <div class="stroke_item-right danger" v-else-if="top1.wm > 0">
                    {{ top1.wm }}%
                    <img
                      style="transform: rotate(180deg)"
                      src="@/assets/images/echarts/jiang.png"
                      alt=""
                    />
                  </div>
                  <div class="stroke_item-right" v-else-if="top1.wm < 0">
                    {{ top1.wm }}%
                    <img
                      style="transform: rotate(180deg)"
                      src="@/assets/images/echarts/sheng.png"
                      alt=""
                    />
                  </div>
                </div>
              </div>
            </div>
            <div class="zbfx_box_item flex_center">
              <!-- <img src="@/assets/images/echarts/tsdian.png" alt="" /> -->
              <div class="center flex_center_direction">
                <div class="title">
                  吨耗电
                  <span
                    class="title"
                    style="color: #cccccc !important"
                    v-if="ton.length <= 0"
                    >暂无数据</span
                  >
                </div>
                <div class="number" v-if="ton.length > 0">
                  <p
                    v-for="(item, index) in ton"
                    :key="index"
                    class="p-number"
                    :class="item == '.' ? 'noborder' : ''"
                  >
                    {{ item }}
                  </p>
                  <!-- <p class="p-number noborder text_shadow" style="color:#3bffe6;margin-left:3px"> 吨</p> -->
                </div>
              </div>
              <div class="right" v-if="water.length > 0">
                <div class="stroke_item">
                  <span>同比:</span>
                  <div
                    class="stroke_item-right text_shadow_yellow"
                    v-if="top1.ey == '0.00'"
                  >
                    {{ top1.ey }}%
                  </div>
                  <div class="stroke_item-right danger" v-else-if="top1.ey > 0">
                    {{ top1.ey }}%
                    <img
                      style="transform: rotate(180deg)"
                      src="@/assets/images/echarts/jiang.png"
                      alt=""
                    />
                  </div>
                  <div class="stroke_item-right" v-else-if="top1.ey < 0">
                    {{ top1.ey }}%
                    <img
                      style="transform: rotate(180deg)"
                      src="@/assets/images/echarts/sheng.png"
                      alt=""
                    />
                  </div>
                </div>
                <div class="stroke_item">
                  <span>环比:</span>
                  <div
                    class="stroke_item-right text_shadow_yellow"
                    v-if="top1.em == '0.00'"
                  >
                    {{ top1.em }}%
                  </div>
                  <div class="stroke_item-right danger" v-else-if="top1.em > 0">
                    {{ top1.em }}%
                    <img
                      style="transform: rotate(180deg)"
                      src="@/assets/images/echarts/jiang.png"
                      alt=""
                    />
                  </div>
                  <div class="stroke_item-right" v-else-if="top1.em < 0">
                    {{ top1.em }}%
                    <img
                      style="transform: rotate(180deg)"
                      src="@/assets/images/echarts/sheng.png"
                      alt=""
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </StrokeTitle>
      <StrokeTitle2
        title="水利用率近半年统计分析"
        class="float margin"
        style="width: 32.3%"
      >
        <!-- <div class="zidingyi_box" style="margin-left:5px;width:40px;margin:4px 0" @click="waterCount2All" slot="select">
          <span style="font-size:10px;margin-left:3px">全部</span>
        </div> -->

        <div
          class="flex_center Echarts"
          slot="content"
          style="
            height: calc(100% - 1px);
            width: 100%;
            flex-direction: column;
            display: flex;
            justify-content: center;
            align-items: center;
          "
        >
          <div style="display: flex; align-items: center; margin-top: 5px">
            <!-- <ElementRadio v-model="model" :isButton="true" @change="radioChange2" :options="[  {
            value: 'lastMonth', label: '上月' },{value: 'quarter',label: '当季'}]" /> -->
            <ElementSelect
              :isFilterable="false"
              ref="psNameSelect"
              url="/system/dict/data/list"
              :isClearable="false"
              :isAll="false"
              :formData="{ dictType: 'product_report_type' }"
              :settings="settings"
              :isSelected="true"
              @select="selectList2"
            />
          </div>
          <!-- <XRow barWidth="6" :data="top2" xUnit="" barRight="30%" barLeft="6%" /> -->
          <ELine2 :data="top2" label="实际内控" />
        </div>
      </StrokeTitle2>
      <StrokeTitle2
        title="吨耗电近半年统计分析（单位：kw·h/T）"
        class="float margin"
        style="width: 32.3%"
      >
        <!-- <div class="flex_center">
          <ElementRadio v-model="model" :isButton="true" @change="radioChange3" :options="[  {
            value: 'lastMonth', label: '上月' },{value: 'quarter',label: '当季'}]" />
          <ElementSelect :isFilterable="false" ref="psNameSelect" url="/system/dict/data/list" :formData="{dictType:'product_report_type'}" :settings="settings" :isSelected="true" @select="selectList3" />
        </div>
        <div class="flex_center Echarts">
          <XRow barWidth="6" :data="top3" xUnit="" barRight="30%" barLeft="6%" />
        </div> -->
        <!-- <div class="zidingyi_box" style="margin-left:5px;width:40px;margin:4px 0" @click="waterCount3All" slot="select">
          <span style="font-size:10px;margin-left:3px">全部</span>
        </div> -->
        <div
          class="flex_center Echarts"
          slot="content"
          style="
            height: calc(100% - 1px);
            width: 100%;
            flex-direction: column;
            display: flex;
            justify-content: center;
            align-items: center;
          "
        >
          <div style="display: flex; align-items: center; margin-top: 5px">
            <!-- <ElementRadio v-model="model" :isButton="true" @change="radioChange3" :options="[  {
            value: 'lastMonth', label: '上月' },{value: 'quarter',label: '当季'}]" /> -->
            <ElementSelect
              :isFilterable="false"
              ref="psNameSelect"
              url="/system/dict/data/list"
              :isClearable="false"
              :isAll="false"
              :formData="{ dictType: 'product_report_type' }"
              :settings="settings"
              :isSelected="true"
              @select="selectList3"
            />
          </div>
          <!-- <XRow barWidth="6" :data="top3" xUnit="" barRight="30%" barLeft="6%" /> -->
          <ELine2 :data="top3" label="实际内控" />
        </div>
      </StrokeTitle2>
    </div>
    <div class="content_center">
      <StrokeTitle2
        title="水利用率统计"
        class="float margin"
        style="width: 49%"
      >
        <div class="flex_center" slot="select">
          <el-date-picker
            v-model="top5Form.jsrq"
            format="yyyy-MM"
            value-format="yyyy-MM-dd"
            type="month"
            @change="form5Change"
            placeholder="选择月"
            size="mini"
          >
          </el-date-picker>
          <!-- <ElementRadio v-model="model" :isButton="true" @change="radioChange4" /> -->
        </div>
        <div class="flex_center Echarts" style="height: 100%" slot="content">
          <MoreColBar
            :data="bottom1"
            :ySplitLine="false"
            gridRight="5%"
            gridLeft="7%"
            gridHeight="60%"
          />
        </div>
      </StrokeTitle2>
      <StrokeTitle2
        title="吨耗电统计（单位：kw·h/T）"
        class="float margin"
        style="width: 49%"
      >
        <div class="flex_center" slot="select">
          <el-date-picker
            v-model="top5Form.jsrq"
            format="yyyy-MM"
            value-format="yyyy-MM-dd"
            type="month"
            @change="form5Change"
            placeholder="选择月"
            size="mini"
          >
          </el-date-picker>
          <!-- <ElementRadio v-model="model" :isButton="true" @change="radioChange4" /> -->
        </div>
        <div class="flex_center Echarts" style="height: 100%" slot="content">
          <MoreColBar
            :data="bottom2"
            :ySplitLine="false"
            gridRight="5%"
            gridLeft="7%"
            gridHeight="60%"
          />
        </div>
      </StrokeTitle2>
    </div>
    <AllDialog ref="AllDialog" />
  </div>
</template>

<script>
import {
  waterCount1,
  waterCount2,
  waterCount3,
  waterCount4,
  waterCount5,
  waterCountIndex,
} from "@/api/report/complain/water_sum";
import NormalLine from "@/components/echarts/line/normal.vue";
import StrokeTitle2 from "@/components/myComponents/stroke/title2.vue";
import ELine2 from "@/components/echarts/line/index2.vue";

export default {
  components: {
    NormalLine,
    StrokeTitle2,
    ELine2,
  },
  data() {
    return {
      settings: {
        placeholder: "请选择",
        isSelected: true,
        isMultiple: false,
        label: "dictLabel",
        value: "dictValue",
      },
      model: "month",
      // 均值统计
      water: [],
      ton: [],
      //均值统计同比
      top1: {
        wy: "0.00",
        ey: "0.00",
        wm: "0.00",
        em: "0.00",
      },
      top1Form: {
        jsrq: this.$getLastMonth("e"),
        ksrq: this.$getLastMonth("s"),
        val: 0,
        ggname: "",
      },

      //水利用率统计分析
      top2: [],
      top2Form: {
        jsrq: this.$getLastMonth("e"),
        ksrq: this.$getLastMonth("s"),
        val: 1,
        ggname: "",
        all: "",
      },

      //吨耗电统计分析
      top3: [],
      top3Form: {
        jsrq: this.$getLastMonth("e"),
        ksrq: this.$getLastMonth("s"),
        val: 1,
        ggname: "",
        all: "",
      },

      //水利用率统计
      top4Form: {
        jsrq: this.$getLastMonth("e"),
        ksrq: this.$getLastMonth("s"),
      },
      bottom1: {
        // xData: [
        //   "330ml精品",
        //   "500ml迪卡侬系列",
        //   "500ml经典系列",
        //   "330ml经典系列",
        //   "550ml*12塑封",
        //   "qwtfasr",
        // ],
        // yData1: [32, 65, 44, 43, 66.3,34],
        // yData2: [43, 54, 55.34, 11, 22.34,34],
        // yData3: [14, 13, 35, 22, 55,54],
        // yData4: [24, 65, 24, 12, 33,56],
        xData: [],
        yData1: [],
        yData2: [],
        yData3: [],
        yData4: [],
      },
      color: ["blue", "orange", "green", "pink"],

      // 吨耗电统计
      top5Form: {
        jsrq: this.$getLastMonth("e"),
        ksrq: this.$getLastMonth("s"),
      },
      bottom2: {
        xData: [],
        yData1: [],
        yData2: [],
        yData3: [],
        yData4: [],
      },
      /* color: ["blue", "orange", "green", "pink"], */
    };
  },
  created() {
    this.waterCount4(); // 水利用率统计
    this.waterCount5(); // 吨耗电统计
    this.waterCount1(); // 均值统计
    this.waterCount2(); // 水利用率统计分析
    this.waterCount3(); // 吨耗电统计分析
    this.waterCountIndex(); //
    // this.getList()//获取商品列表
  },
  methods: {
    //获取商品列表
    getList() {
      list(
        "/system/dict/data/sevenList",
        { pageNum: 1, pageSize: 20, dictType: "product_report_type" },
        "GET"
      ).then((res) => {
        this.top1Form.ggname = res.rows[0].dictValue;
        this.top2Form.ggname = res.rows[0].dictValue;
        this.top3Form.ggname = res.rows[0].dictValue;
        this.waterCount1(); // 均值统计
        this.waterCount2(); // 水利用率统计分析
        this.waterCountIndex();
        this.waterCount3(); // 吨耗电统计分析
      });
    },
    // 均值时间切换
    radioChange1(e) {
      this.top1Form.ksrq = e[0];
      this.top1Form.jsrq = e[1];
      this.waterCount1();
    },
    //均值选择器切换
    selectList1(e) {
      this.top1Form.ggname = e;
      if (e == undefined) {
        this.top1Form.val = 1;
      } else {
        this.top1Form.val = 0;
      }
      this.waterCount1();
      this.waterCountIndex();
    },
    //均值统计
    waterCount1() {
      waterCount1(this.top1Form).then((res) => {
        if (res.code == 200 && res.data.length != 0) {
          if (res.data[0] == "NaN" || res.data[0] == "Infinity") {
            res.data[0] = 0;
          }
          if (res.data[1] == "NaN" || res.data[1] == "Infinity") {
            res.data[1] = 0;
          }
          this.water = res.data[0].toString().split("");
          this.ton = res.data[1].toString().split("");
        } else {
          this.water = [];
          this.ton = [];
        }
      });
    },
    //均值统计环比
    waterCountIndex() {
      waterCountIndex(this.top1Form).then((res) => {
        if (res.code == 200) {
          this.top1.wy = (Number(res.data.wy) * 100).toFixed(2);
          this.top1.ey = (Number(res.data.ey) * 100).toFixed(2);
          this.top1.wm = (Number(res.data.wm) * 100).toFixed(2);
          this.top1.em = (Number(res.data.em) * 100).toFixed(2);
        }
      });
    },

    // 水利用率时间切换
    radioChange2(e) {
      this.top2Form.ksrq = e[0];
      this.top2Form.jsrq = e[1];
      this.waterCount2();
    },
    //水利用率选择器切换
    selectList2(e) {
      this.top2Form.ggname = e;
      if (e == undefined) {
        this.top2Form.val = 1;
      } else {
        this.top2Form.val = 0;
      }
      this.waterCount2();
    },
    //水利用率统计分析
    waterCount2() {
      waterCount2(this.top2Form).then((res) => {
        // console.log(22222,res)
        if (res.code == 200 && res.data.lenth != 0) {
          this.top2 = [];
          for (let item of res.data) {
            let obj = {};
            obj.name = item.value + "月";
            obj.value = item.month2;
            obj.value2 = item.month;
            this.top2.push(obj);
          }
        }
      });
    },
    //水利用率统计分析-全部
    waterCount2All() {
      let obj = JSON.parse(JSON.stringify(this.top2Form));
      obj.all = "111";
      waterCount2(obj).then((res) => {
        if (res.code == 200) {
          this.$refs.AllDialog.unit = "";
          this.$refs.AllDialog.right.unit = "";
          this.$refs.AllDialog.tableData.data = res.data;
          this.$refs.AllDialog.dialogTableVisible = true;
        }
      });
    },
    // 吨耗电统计分析
    radioChange3(e) {
      this.top3Form.ksrq = e[0];
      this.top3Form.jsrq = e[1];
      this.waterCount3();
    },
    //吨耗电选择器切换
    selectList3(e) {
      this.top3Form.ggname = e;
      if (e == undefined) {
        this.top3Form.val = 1;
      } else {
        this.top3Form.val = 0;
      }
      this.waterCount3();
    },
    //吨耗电统计分析
    waterCount3() {
      waterCount3(this.top3Form).then((res) => {
        if (res.code == 200 && res.data.lenth != 0) {
          this.top3 = [];
          for (let item of res.data) {
            let obj = {};
            obj.name = item.value + "月";
            obj.value = item.month2;
            obj.value2 = item.month;
            this.top3.push(obj);
          }
        }
      });
    },
    //吨耗电统计分析-全部
    waterCount3All() {
      let obj = JSON.parse(JSON.stringify(this.top3Form));
      obj.all = "111";
      waterCount3(obj).then((res) => {
        if (res.code == 200) {
          this.$refs.AllDialog.unit = "";
          this.$refs.AllDialog.right.unit = "";
          this.$refs.AllDialog.tableData.data = res.data;
          this.$refs.AllDialog.dialogTableVisible = true;
        }
      });
    },
    // 水利用率统计
    radioChange4(e) {
      this.top4Form.ksrq = e[0];
      this.top4Form.jsrq = e[1];
      this.waterCount4();
    },
    form4Change(e) {
      console.log(e);
      this.top4Form.ksrq = this.$serveGetMonth(e, "s");
      this.top4Form.jsrq = this.$serveGetMonth(e, "e");
      this.waterCount4();
    },
    //水利用率统计
    waterCount4() {
      waterCount4(this.top4Form).then((res) => {
        // console.log(44444, res);
        if (res.code == 200 && res.data.lenth != 0) {
          this.bottom1 = res.data;
        }
      });
    },

    // 吨耗电统计
    radioChange5(e) {
      this.top5Form.ksrq = e[0];
      this.top5Form.jsrq = e[1];
      this.waterCount5();
    },
    form5Change(e) {
      this.top5Form.ksrq = this.$serveGetMonth(e, "s");
      this.top5Form.jsrq = this.$serveGetMonth(e, "e");
      this.waterCount5();
    },
    //吨耗电统计
    waterCount5() {
      waterCount5(this.top5Form).then((res) => {
        // console.log(5555, res);
        if (res.code == 200 && res.data.lenth != 0) {
          this.bottom2 = res.data;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.seven_content {
  z-index: 10;
  background: #093b76;
  width: 100%;
  height: calc(100vh - 183px);
  overflow: auto;
  .content_top,
  .content_center {
    width: 100%;
    height: 48%;
  }
  .content_center {
    height: 46.8%;
  }
  .zbfx_box {
    width: 95%;
    height: 86%;
    margin-left: 0%;
    .zbfx_box_item {
      margin-top: 4%;
      width: 100%;
      height: 47%;
      max-height: 85px;
      background: linear-gradient(
        180deg,
        rgba(21, 74, 126, 0.8) 0%,
        rgba(21, 74, 126, 0.8) 100%
      );
      border: 1px solid rgba(10, 89, 155, 0.8);
      img {
        width: 75px;
        margin-left: 1%;
      }
      .center {
        width: 50%;
        display: flex;
        flex-direction: column;
        margin-left: 2%;
        align-items: center;
        // height: 80px;
        .title {
          font-size: 13px;
          font-family: Source Han Sans CN, Source Han Sans CN-Normal;
          font-weight: Normal;
          color: #c1f0fe;
          margin: 25px 0 5px 4px;
        }
        .number {
          font-family: SimHei, SimHei-Regular;
          font-weight: 400;
          font-size: 13px;
          height: 50px;
          display: flex;
          align-items: flex-end;
          margin-top: 10px;
          .p-number {
            width: 25px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            color: #ffff00;
            /* 背景图片 */
            background: url("~@/assets/images/echarts/numbj.png");
            background-size: 100% 100%;
            list-style: none;
            margin-right: 2px;
            border-radius: 4px;
            font-size: 24px;
            // color: rgba(59, 255, 230, 1) !important;
          }
          .noborder {
            background: none;
            font-size: 14px;
            position: relative;
            width: 10px;
            top: -5px;
          }
        }
      }
      .right {
        width: 33%;
        // background:red;
        height: 76px;
        margin-left: 2%;
      }
    }
  }
  @media screen and (max-width: 1000px) {
    .zbfx_box {
      width: 85%;
    }
  }
  .Echarts {
    height: calc(100% - 50px);
  }
  .center_echarts {
    height: 180px;
  }
}
</style>
<style lang="scss" scoped>
.stroke_item {
  height: 35px;
  display: flex;
  align-items: center;
  margin-bottom: 2.5%;
  span {
    font-size: 13px;
    color: #c1f0fe !important;
  }
  .stroke_item-right {
    height: 100%;
    margin-left: 5px;
    font-size: 16px;
    font-family: Adobe Heiti Std, Adobe Heiti Std-R;
    font-weight: R;
    text-align: center;
    color: #3bffe6;
    text-shadow: 1px 0px 3px #3bffe6;
    line-height: 35px;
    letter-spacing: 1px;
    display: flex;
    justify-content: center;
  }
  .danger {
    color: rgba(255, 74, 74, 1);
    text-shadow: 1px 0px 3px rgba(255, 74, 74, 1);
  }
  .text_shadow_yellow {
    color: yellow;
    text-shadow: 1px 0px 3px yellow;
  }
  img {
    width: 8px !important;
    height: 10px;
    margin-top: 9px;
  }
}
@media screen and (max-width: 1000px) {
  .stroke_item {
    height: 30px;
  }
  .right {
    width: 43% !important;
    height: 66px !important;
  }
}
</style>
